import styles from "./setting.module.scss"
import Page from "@/components/Page"
import { THEME } from "@/utils/theme"
import { useState } from "react"
import Taro  from "@tarojs/taro"
import { Radio, View } from "@tarojs/components"

const Setting = () => {
    const [values, setValues] = useState<string>(Taro.getStorageSync('themeType') || 'normal')
    const oldTheme = Taro.getStorageSync('themeType')

    const switchChange = (e) => {
        setValues(e)
        Taro.setStorageSync('themeType', e)
    }

    return (
        <Page>
            <View style={THEME[values].styles} className={styles.box}>
                <View onClick={() => switchChange(THEME.normal.value)}>
                    <Radio value={THEME.normal.value} checked={values === THEME.normal.value}></Radio>{THEME.normal.label}
                </View>
                <View onClick={() => switchChange(THEME.dark.value)}>
                    <Radio value={THEME.dark.value} checked={values === THEME.dark.value}></Radio>{THEME.dark.label}
                </View>
                <View onClick={() => switchChange(THEME.fresh.value)}>
                    <Radio value={THEME.fresh.value} checked={values === THEME.fresh.value}></Radio>{THEME.fresh.label}
                </View>
            </View>
        </Page>
    )
}

export default Setting